<template>
	<div>
		<van-row>
		  <van-col span="2"></van-col>
		  <van-col span="20">
			  <div style="margin-top:100px;">
				  <van-image
				    round
				    width="10rem"
				    height="10rem"
				    src="https://img.yzcdn.cn/vant/cat.jpeg"
				  />
			  </div>
			  <div>
				  <van-form @submit="onSubmit">
				    <van-cell-group inset>
				      <van-field
				        v-model="user.phone"
				        name="用户名"
				        label="手机号"
				        placeholder="请输入手机号"
				        :rules="[{ required: true, message: '请输入手机号' }]"
				      />
				      <van-field
				        v-model="user.password"
				        :type="passtype"
				        name="密码"
				        label="密码"
				        placeholder="请输入密码"
				        :rules="[{ required: true, message: '请输入密码' }]"
						right-icon="eye-o"
						@click-right-icon="showPass()"
				      />
				    </van-cell-group>
				    <div style="margin: 16px;">
				      <van-button round block type="primary" @click="login()">
				        登录
				      </van-button>
				    </div>
					<div style="margin-top: 16px;">
						<van-row>
						  <van-col span="8"><router-link to="/register">注册账号</router-link></van-col>
						  <van-col span="8"></van-col>
						  <van-col span="8"><router-link to="/findpass">忘记密码?</router-link></van-col>
						</van-row>
					</div>
				  </van-form>
			  </div>
		  </van-col>
		  <van-col span="2"></van-col>
		</van-row>
		
	</div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
  },
  data(){
	  return{
		user:{
		 	phone: "",
		 	password: "",
		 },
		passtype:"password"
	  }
  },methods:{
	  showPass(){
		  if(this.passtype==="password"){
			this.passtype="text";  
		  }else{
			this.passtype="password";
		  }
		
	  },
	  login(){
		  //实现账号的登录
		  var that=this;
		  this.axios.post("auth/login",this.user).then((res) => {
		    console.log(res.data)
			if(res.data.code==200){
				//更新令牌
				this.$store.commit("setToken",res.data.data);
				//吐司，短暂的弹出窗，默认3秒自动消失
				this.$toast.success('登录成功，进入主页');
				//成功-跳转到主页
				this.$router.push("/");
			}else{
				this.$toast({
				  message: "亲，手机号或密码错误",
				  icon: 'close'
				});
			}
		  })
	  }
  }
}
</script>

<style>
</style>
